<template>
  <div>
    <div style="position:absolute;right:10%;top:10px;z-index:100">
      <chart-select v-if="isShowSelect" :options="options"/>
    </div>
    <div ref="line" style="width:100%;height:500px;" v-loading="loading"></div>
  </div>
</template>

<script>
// import {getChartData} from '@api/chart'
export default {
  data() {
    return {
      loading: true,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  props: {
    api: {
      type: String,
      default: undefined
    },
    isShowSelect: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    api(nv) {
      // getChartData(nv).then(res => {
      //   if (res.msg > 0) {
      //     resData = res;
      //   } else {
      //     this.$message("请求失败");
      //   }
      // });
    }
  },
  mounted() {
    this.loading = false;
    // 后台需要传：{xData:String|Array,title:String,data:Array[object]}
    let resData = {};
    resData.xData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    resData.title = "面积折线图";
    resData.data = [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        areaStyle: {},
        smooth: true
      }
    ];
    let myChart = this.$echarts.init(this.$refs.line);
    // 指定图表的配置项和数据
    let option = {
      title: {
        text: resData.title,
        x: "2%",
        textStyle: {
          color: "rgba(96, 98, 102, 1)",
          fontSize: "20"
        }
      },
      color: ["#3398DB"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "line" // 默认为直线，可选为：'line' | 'shadow'
        }
      },

      xAxis: {
        boundaryGap: false,
        type: "category",
        data: resData.xData,
        // 提示线颜色
        axisPointer: {
          lineStyle: {
            color: "#4670dc"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#008ACD"
          }
        },
        axisTick: {
          lineStyle: {
            color: "008ACD"
          }
        },
        axisLabel: {
          color: "#008ACD"
        }
      },
      yAxis: [
        {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#008ACD"
            }
          },
          axisTick: {
            lineStyle: {
              color: "#008ACD"
            }
          },
          axisLabel: {
            color: "#008ACD"
          },
          splitLine: {
            lineStyle: {
              color: ["#eee"]
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.1)"]
            }
          }
        }
      ],
      series: resData.data
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 浏览器窗口自适应
    window.onresize = function() {
      myChart.resize();
    };
  }
};
</script>

<style>
</style>
